<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
#owl-demo{position:relative;width:100%;height:750px;margin:20px auto 0 auto;}
#owl-demo .item{ position:relative;display:block;}
#owl-demo img{display:block;width:100%;height:750px;}
#owl-demo b{position:absolute;left:0;bottom:0;width:100%;height:78px;background-color:#000;opacity:.5;filter:alpha(opacity=50);}
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;}

.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(JSP/images/carousel/bg15.png);*display:inline;*zoom:1;}
.owl-pagination .active{width:25px;background-image:url(JSP/images/carousel/bg16.png);}
.owl-buttons{display:none;}
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
.owl-prev{left:0;background-image:url(JSP/images/carousel/bg17.png);}
.owl-next{right:0;background-image:url(JSP/images/carousel/bg18.png);}
.owl-prev:hover{background-image:url(JSP/images/carousel/bg19.png);}
.owl-next:hover{background-image:url(JSP/images/carousel/bg20.png);}
</style>

<link href="/tmx/JSP/css/bootstrap.min.css" rel="stylesheet" />
<link href="/tmx/JSP/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/tmx/JSP/css/templatemo_misc.css" />
<link type="text/css" rel="stylesheet" href="/tmx/JSP/css/easy-responsive-tabs.css" />
<link href="/tmx/JSP/css/templatemo_style.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="/tmx/JSP/css/carousel/owl.carousel.css" />

<script type="text/javascript" src="/tmx/JSP/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/tmx/JSP/js/carousel/owl.carousel.js"></script>
        
<script src="/tmx/JSP/js/jquery.lightbox.js"></script>
<script src="/tmx/JSP/js/easyResponsiveTabs.js" type="text/javascript"></script><!-- 功能：点击左边标题，切换内容 -->  
<script type="text/javascript" src="/tmx/JSP/js/layer/layer.js" ></script>

<script>
    
    $(function(){
    	$('#owl-demo').owlCarousel({
    		items: 1,
    		navigation: true,
    		navigationText: ["上一个","下一个"],
    		autoPlay: true,
    		stopOnHover: true
    	}).hover(function(){
    		$('.owl-buttons').show();
    	}, function(){
    		$('.owl-buttons').hide();
    	});
    });
  </script>
  
  <style>
  
  body{
	font-family:Microsoft YaHei;
  }
  
  h1{
	font-family:Microsoft YaHei;
  }
  
  .green_block_middle{
	width: 24%;  
    height: 80px;  
    line-height: 80px;   
    text-align: center;  
    background: #339966;  
    color:#fff;  
    font-size: 24px;  
    float: left;
  }
  
  .grey_block_middle{
	width: 24%;  
    height: 80px;  
    line-height: 80px;  
    text-align: center;  
    background: #666666;  
    color:#fff;  
    font-size: 24px;  
    float: left;
  }
  
  .padding_block{
  	width: 1%;
  	height: 80px;
  	float: left;
  }
  
  </style>
  
  </head>
  <body>
    	<!-- logo start -->
    <div class="logocontainer">
    	<div class="row">
        	<h1><a href="#">社区志愿者服务中心信息化平台软件</a></h1>
            <div class="clear"></div>
            <div class="templatemo_smalltitle"></div>
       </div>
    </div>
    <!-- logo end -->    
   <div id="menu-container" class="main_menu">
	
    <!-- start -->
   <div class="testimonial" id="menu-4">
    	<div class="container">
        	<div class="row templatemo_bordergapborder">
        		<!-- 幻灯片start -->
				<div id="owl-demo" class="owl-carousel">
					<s:iterator value="activityList" var="a" status="statu">
					<a class="item" href="#"><img src="/tmx/pics/${a.pic }" alt="" onclick="toActivity(${statu.index})" /><b></b><span>${a.picDesc }</span></a>
					</s:iterator>
				</div>
				<!-- 幻灯片end -->
				<!-- 四个tab start -->
				<%-- <div style="text-align: center; margin-top: 10px;">
					<div class="grey_block_middle"><a class="show-1 templatemo_hometestimonial" href="/tmx/JSP/index.jsp">返回</a></div>
					<div class="padding_block"></div>
					<div class="green_block_middle"><a class="show-1 templatemo_hometestimonial" href="/tmx/ActivityInfoAction!getActivityListForPage.action">${activityList.get(0).title }</a></div>
					<div class="padding_block"></div>
					<div class="padding_block"></div>
					<div class="green_block_middle"><a class="show-1 templatemo_hometestimonial" href="/tmx/ActivityInfoAction!getActivityListForPage.action">${activityList.get(1).title }</a></div>
					<div class="padding_block"></div>
					<div class="green_block_middle"><a class="show-1 templatemo_hometestimonial" href="/tmx/ActivityInfoAction!getActivityListForPage.action">更多</a></div>
				</div> --%>
				<div style="text-align: center; margin-top: 10px;">
					<!-- <div class="grey_block_middle" onclick="goBack()">返回</div>
					<div class="padding_block"></div> -->
					<div style="visibility: hidden;">
					<div class="green_block_middle" onclick="toActivity()">${activityList.get(0).title }</div>
					<div class="padding_block"></div>
					<div class="padding_block"></div>
					<div class="green_block_middle" onclick="toActivity()">${activityList.get(1).title }</div>
					<div class="padding_block"></div>
					</div>
					
					<div class="green_block_middle" onclick="toActivity(0)">更多</div>
					<div class="padding_block"></div>
					<div class="grey_block_middle" onclick="goBack()">返回</div>
				</div>
				<!-- 四个tab end -->
			</div>
		</div>
	</div>
    <!-- end -->	
    
    </div>
    
    <!-- logo start -->
    <!-- <div class="logocontainer">
    	<div class="row">
            <div class="templatemo_footer"></div>
       </div>
    </div> -->
    <!-- logo end -->  
   <script type="text/javascript">
    $(document).ready(function () {
		
    });
    
    function goBack(){
    	location.href = "/tmx/JSP/index.jsp";
    }
    
    function toActivity(liIndex){
    	location.href = "/tmx/ActivityInfoAction!getActivityListForPage.action?liIndex=" + liIndex;
    }
    
</script>

  </body>
</html>